<template>
    <div id="form-wrap" v-show="isShown">
        <div class="form">
            <section>
                <h2>分享你的收藏</h2>
                <form>
                    <div class="field first">
                        <mu-text-field hintText="导航名称" v-model="title" /><br/>
                    </div>
                    <div class="field">
                        <mu-select-field :labelFocusClass="['label-foucs']" label="所属标签" v-model="catSelectIndex">
                            <mu-menu-item v-for="nav,index in navs" :key="index" :value="index" :title="nav.tagName" />
                        </mu-select-field>
                    </div>

                    <!-- <div class="field half">
                                    <mu-text-field hintText="所属标签：如开发社区" /><br/>
                                </div> -->
                    <!--  <div class="field half first">
                                    <mu-raised-button class="demo-raised-button" label="选择文件">
                                        <input type="file" class="file-button">
                                    </mu-raised-button>
                                </div>
                                 <div class="field half">
                                    <mu-text-field hintText="未选择图片" disabled /><br/>
                                </div> -->

                    <div class="field">
                        <mu-text-field hintText="图片链接" v-model="img" /><br/>
                    </div>

                    <div class="field">
                        <mu-text-field hintText="网站链接" v-model="link" /><br/>
                    </div>

                    <div class="field">
                        <mu-text-field hintText="描述" multiLine :rows="3" :rowsMax="6" v-model="content" /><br/>
                    </div>
                    <ul class="actions">
                        <li><input type="submit" value="Commit" class="special" @click="commit" /></li>
                        <li @click.stop.prevent="closeCommit"><input type="submit" value="Cancle" class="special" /></li>
                    </ul>
                </form>
            </section>
        </div>
    </div>
</template>

<script>
import API from '../api/api'

export default {
    name: 'commit',
    props:['isShown'],
    data: function() {
        return {
            navs: null,
            title: '',
            catSelectIndex:undefined,
            cat: '',
            catId: '',
            img: '',
            link:'',
            content:''
        }
    },
    methods: {
        closeCommit:function() {
            this.$emit('closeCommit')
        },
        commit: function(){
            console.log(this.cat)
            if(!this.title || this.catSelectIndex == undefined || !this.img || !this.link || !this.content){
                alert('数据不完整')
                return;
            }
            API.submitNav({
                title: this.title,
                cat: this.navs[this.catSelectIndex].tagName,
                catId: this.navs[this.catSelectIndex].catId,
                img: this.img,
                link: this.link,
                content: this.content
            }).then(function(res){
                console.log(res)
            });
        }
    },
    mounted: function(){
           API.getNavTags().then(function(data){
            console.log(data)
            var arr = [];
            data.forEach(function(nav){
                var obj = {
                    catId: nav.attributes.cat_id,
                    tagName: nav.attributes.category
                }
                if(arr.indexOf(nav.attributes.category) == -1){
                    arr.push(obj)
                }
            })
            this.navs = arr;
        }.bind(this));
    }
}
</script>

<style scoped>
.mu-text-field {
    width: 100%;
}

.file-button {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
}

#form-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .95);
    z-index: 3;
}
</style>